<template>
  <div class="app-container">
    <div>
      机号：
      <el-input
        v-model="machine_number"
        placeholder="admin"
        style="width:240px"/>
      <label v-html="numberPass"/>
      号码：
      <el-input
        v-model="bet_number"
        placeholder="numbr"
        style="width:240px"/>
      <label v-html="numberPass"/>
      出票序号：
      <el-input
        v-model="serial_number"
        placeholder="serial"
        style="width:240px"/>
    </div>
    <br/>

    <div>
      时间：
      <el-date-picker
        v-model="startTime"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
      </el-date-picker>
      -
      <el-date-picker
        v-model="endTime"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
      </el-date-picker>
      <label v-html="pass"></label>
      <el-button type="primary" @click="getOrders(1)">搜索</el-button>
      <el-button type="primary">打印</el-button>
    </div>
    <br/>

    <!--  中奖/未中奖订单  -->
    <div>
      中奖订单：
      <el-checkbox v-model="cbGetWin"/>
      <label v-html="cbPass"/>
      未兑奖订单：
      <el-checkbox v-model="cbNotGetWin"/>
    </div><br/>

    <el-checkbox-group v-model="checkList">
      <el-checkbox label="K">Korsou</el-checkbox>
      <el-checkbox label="F">Flamingo</el-checkbox>
      <el-checkbox label="D">Diario</el-checkbox>
      <el-checkbox label="S">ST</el-checkbox>
    </el-checkbox-group>

<!--    <div><br/>-->
<!--      <el-row>-->
<!--        <el-button type="primary" plain @click="setCurrentBelongTo('');getOrders(1);">所有</el-button>-->
<!--        <el-button type="primary" plain @click="setCurrentBelongTo('K');getOrders(1);">Korsou</el-button>-->
<!--        <el-button type="primary" plain @click="setCurrentBelongTo('F');getOrders(1);">Flamingo</el-button>-->
<!--        <el-button type="primary" plain @click="setCurrentBelongTo('D');getOrders(1);">Diario</el-button>-->
<!--        <el-button type="primary" plain @click="setCurrentBelongTo('S');getOrders(1);">ST</el-button>-->
<!--        <label v-html="pass"/>当前地区(默认所有地区)：{{ currentBelongTo === '' ? '所有' : currentBelongTo }}-->
<!--      </el-row>-->
<!--      <br/>-->
<!--      <hr/>-->
<!--    </div>-->


    <!--  订单列表  -->
    <el-table
      border
      :header-cell-style="{'color':'#2E53E9','font-size':'1.2em','font-weight':'900','background':'#F0FFF0'}"
      :row-style="grayBg"
      :cell-class-name="totalInfoClass"
      :data="datas">
      <el-table-column sortable
                       prop="machine_number"
                       label="机号"
                       min-width="8%"/>
      <el-table-column sortable
                       prop="bet_number"
                       label="号码"
                       min-width="8%"/>
      <el-table-column sortable
                       prop="prizes"
                       label="加奖"
                       min-width="8%">
        <template slot-scope="scope">{{ getPrizes(scope.row.bet_number) }}</template>
      </el-table-column>
      <el-table-column sortable
                       prop="bet_money"
                       label="金额"
                       min-width="10%"/>
      <el-table-column sortable
                       prop="serial_number"
                       label="出票序号"
                       min-width="19%"/>
      <el-table-column sortable
                       prop="created_at" min-width="19%"
                       label="下单时间"/>
      <el-table-column min-width="12%" sortable
                       label="开奖时间">
        <template slot-scope="scope">{{ getOpenAt(scope.row.created_at) }}</template>
      </el-table-column>
      <el-table-column sortable
                       prop="belong_to"
                       label="地区"
                       min-width="10%"/>
      <el-table-column sortable
                       prop="prizes"
                       label="中奖金额"
                       min-width="10%"/>
      <el-table-column min-width="15%" sortable
                       label="兑奖时间">
        <template slot-scope="scope">{{ getOpenAt(scope.row.created_at) }}</template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @current-change="getOrders"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :page-count="pageCount">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import axios from "axios";
  import {getEndYMD, getStartYMD} from "@/util/DTUtil";
  import G from "@/components/G";

  export default {
    data() {
      return {
        checkList: [],
        machine_number: '',
        bet_number: '',
        serial_number: '',
        startTime: getEndYMD(),
        endTime: getEndYMD(),
        cbGetWin: false,
        cbNotGetWin: false,
        currentBelongTo: '',//p

        pass: '&emsp;',
        numberPass: '&emsp;&emsp;&emsp;&emsp;',
        cbPass: '&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;',

        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        currentPage: 1,//p-default
        pageSize: 50,//p-fixed
        datas: [],
        pageCount: 0,//<=
        //按序号改变条目背景色
        tempSerial: '',
        tempColor: '#FFFFFF',//E0E0E0
        tempCount: 0
      }
    },
    methods: {
      setCurrentBelongTo(belongTo) {
        this.currentBelongTo = belongTo;
      },
      checkTime(i) {
        if (i < 10) {
          i = "0" + i
        }
        return i;
      },
      getOrders(page, br, cg) {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        let belongs = '';
        if (this.checkList.length > 0) {
          for (let i = 0; i < this.checkList.length; i++) {
            belongs = belongs + "," + this.checkList[i];
          }
        }
        if (belongs.startsWith(",")) {
          belongs = belongs.substring(1, belongs.length)
        }

        this.currentPage = page;
        let startDate = new Date(this.startTime);
        let requestStartTime = startDate.getFullYear() + '-' + this.checkTime(startDate.getMonth() + 1) + '-' + this.checkTime(startDate.getDate());
        let endDate = new Date(this.endTime);
        let requestEndTime = endDate.getFullYear() + '-' + this.checkTime(endDate.getMonth() + 1) + '-' + this.checkTime(endDate.getDate());
        requestStartTime = requestStartTime + " 00:00:00"
        requestEndTime = requestEndTime + " 23:59:59"
        let param = '&machine_number=' + this.machine_number
          + '&bet_number=' + this.bet_number
          + '&serial_number=' + this.serial_number
          + '&page=' + this.currentPage
          + '&pageSize=' + this.pageSize
          + '&startTime=' + requestStartTime
          + '&endTime=' + requestEndTime
          + '&belong_to=' + belongs
        if (br === 'default' && cg === 'default') {
          param = param + '&b_is_winner='
            + '&checked_winning='
        } else {
          param = param + '&b_is_winner=' + (this.cbGetWin ? '1' : '')
            + '&checked_winning=' + (this.cbNotGetWin ? '0' : '')
        }

        console.log('getOrders param:' + param);
        axios.post(G.host + 'getOrders', param).then(res => {
          this.totalPrice = res.data.totalPrice;
          this.pageCount = res.data.pageCount;
          this.datas = res.data.orderList;
          loading.close()
        });
      },
      getPrizes(number, money) {
        if (number.includes("P")) {
          return "POOL"
        } else {
          return ""
        }
      },
      getOpenAt(created_at) {
        if (created_at !== null && created_at.length >= 10) {
          return created_at.substring(0, 10);
        } else return '';
      },
      //置灰
      grayBg({row, rowIndex}) {
        if (row.color === 1) {
          return {
            background: '#FFFFFF'
          }
        } else {
          return {
            background: '#E0E0E0'
          }
        }
      },
      //兑奖条目背景色
      totalInfoClass({row, column, rowIndex, columnIndex}) {
        if (row.checked_winning === 1) {
          return 'infoStyle'
        }
      }
    }, mounted() {
      this.getOrders(1, 'default', 'default')
      //初始化当前日期
      this.startTime = getEndYMD()
      this.endTime = getEndYMD()
    }
  }
</script>

<style>
  .infoStyle {
    font-style: italic;
    color: #3f9eff;
    font-weight: bold;
  }
</style>
